<template>
	<view v-if="loading || error" class="loading_view">
		<u-loading mode="circle" v-if="loading" size="50"></u-loading>
		<u-toast ref="uToast" />
		<view v-if="error"><image class="icon" src="../../static/image/empty-image-error.png"></image> </view>
		<view class="messgae">{{ loading?'加载中...':'加载失败' }}</view>
	</view>
	<view v-else style="background-color: #EFEFEF;height: 100vh;overflow: auto;">
		<u-toast ref="uToast" />
		<view class="item_box">
			<!-- occupation_list -->
			<view class="item_view">
				<view class="cen" @click="occupation_show=true">
					<view class="left_item">职业</view>
					
					<view class="right_item">{{ occupation_name==''?'未选择':occupation_name }}</view>
					
				</view>
				<u-select v-model="occupation_show"  @confirm="occupation_confirm" :list="occupation_list"></u-select>
				<i class="exit_icon"></i>
			</view>
			
			<view class="item_view">
				<view class="cen" @click="salary_show=true">
					<view class="left_item">月薪</view>
					
					<view class="right_item">{{ salary_name==''?'未选择':salary_name }}</view>
				</view>
				<u-select v-model="salary_show"  @confirm="salary_confirm" :list="salary_list"></u-select>
				<i class="exit_icon"></i>
			</view>
			
			<!-- area_show -->
			<view class="item_view">
				<view class="cen" @click="area_show=true">
					<view class="left_item">现居</view>
					
					<view class="right_item">{{ formData.u_city==''?'未选择':formData.u_city }}</view>
				</view>
				<u-select v-model="area_show"  mode="mutil-column-auto" @confirm="area_confirm" :list="area_list"></u-select>
				<i class="exit_icon"></i>
			</view>
		
		</view>
		
		<view style="color: red;text-indent: 40rpx;margin-top: 20rpx;">
			<text>昵称，实名认证后可修改一次</text>
		</view>
		
		<view class="item_box">
			
			<view class="item_view">
				<view class="cen">
					<view class="left_item">昵称</view>
					
					<view class="right_item" v-if="formData.u_nicknameNum>0">
						<input class="text_input" v-model="formData.u_nickname" placeholder="请设置您的昵称" type="text">
					</view>
					<view class="right_item" style="width: 540rpx;font-size: 30rpx;" v-else>
						{{ formData.u_nickname }}
					</view>
				</view>
				
				<i class="exit_icon"></i>
			</view>
			
			<view class="item_view">
				<view class="cen" @click="height_show=true">
					<view class="left_item">身高</view>
					
					<view class="right_item">{{ height_name==''?'未选择':height_name }}</view>
				</view>
				<u-select v-model="height_show" @confirm="height_confirm" :list="height_list"></u-select>
				<i class="exit_icon"></i>
			</view>
			
			<view class="item_view">
				<view class="cen" @click="marriage_show=true">
					<view class="left_item">婚烟状况</view>
					
					<view class="right_item">{{ marriage_name==''?'未选择':marriage_name }}</view>
				</view>
				<u-select v-model="marriage_show" @confirm="marriage_confirm" :list="marriage_list"></u-select>
				<i class="exit_icon"></i>
			</view>
			
			<view class="item_view">
				<view class="cen" @click="nativePlace_show=true">
					<view class="left_item">籍贯</view>
					
					<view class="right_item">{{ formData.u_place==''?'未选择':formData.u_place }}</view>
				</view>
				<u-select v-model="nativePlace_show" mode="mutil-column-auto" @confirm="nativePlace_confirm" :list="nativePlace_list"></u-select>
				<i class="exit_icon"></i>
			</view>
			
			<view class="item_view">
				<view class="cen" @click="blood_show=true">
					<view class="left_item">血型</view>
					
					<view class="right_item">{{ blood_name==''?'未选择':blood_name }}</view>
				</view>
				<u-select v-model="blood_show"  @confirm="blood_confirm" :list="blood_list"></u-select>
				<i class="exit_icon"></i>
			</view>
		</view>
		
		<view class="item_box">
			<view class="item_view">
				<view class="cen" @click="education_show=true">
					<view class="left_item">学历</view>
					
					<view class="right_item">{{ education_name==''?'未选择':education_name }}</view>
				</view>
				<u-select v-model="education_show"  @confirm="education_confirm" :list="education_list"></u-select>
				<i class="exit_icon"></i>
			</view>
			
			<view class="item_view">
				<view class="cen" @click="time_show=true" >
					<view class="left_item">生日</view>
					
					<view class="right_item">{{ time_name==''?'未选择':time_name }}</view>
				</view>
				<u-calendar v-model="time_show" @change="time_change" :mode="mode"></u-calendar>
				<i class="exit_icon"></i>
			</view>
		</view>
		
		<view class="butt_view"><u-button @click="submit" type="error">完成</u-button></view>
		
	</view>
</template>
<script>
	import area from '../../static/js/area.js'

	export default {
		data() {
			return {
				a:['220000','220200','220202'],
				formData:{
					// 职业类型
					u_occupation:0,
					// 最低月薪
					u_salaryMin:0,
					// 最高月薪
					u_salaryMax:0,
					// 现居地址
					u_city:'',
					// 用户昵称
					u_nickname:'',
					// 身高
					u_height:0,
					// 婚烟状态
					u_marriage:0,
					// 籍贯
					u_place:'',
					// 血型
					u_blood:0,
					// 学历
					u_education:0,
					// 生日
					u_birthday:0,
					u_nicknameNum:1
				},
				mode:'date',
				occupation_show:false,
				occupation_list:[
					{
						value: '0',
						label: '不限'
					},
					{
						value: '1',
						label: '在校学生'
					},
					{
						value: '2',
						label: '计算机/IT'
					},
					{
						value: '3',
						label: '电子/仪器'
					},
					{
						value: '4',
						label: '通信技术'
					},
					{
						value: '5',
						label: '销售'
					},
					{
						value: '6',
						label: '市场拓展'
					},
					{
						value: '7',
						label: '公安/商务'
					},
					{
						value: '8',
						label: '采购/贸易'
					}
				],
				occupation_name:'',
				salary_show:false,
				salary_list:[
					{
						value: '0-2',
						label: '2千以下'
					},
					{
						value: '2-5',
						label: '2千-5千'
					},
					{
						value: '5-10',
						label: '5千-1万'
					},
					{
						value: '10-20',
						label: '1万-2万'
					},
					{
						value: '20-50',
						label: '2万-5万'
					},
					{
						value: '50-100',
						label: '5万-10万'
					},
					{
						value: '100-200',
						label: '10万以上'
					}
				],
				salary_name:'',
				area_show:false,
				area_list:area,
				height_list:[],
				height_show:false,
				height_name:'',
				marriage_list:[
					{value:1,label:'未婚'},
					{value:2,label:'已婚'},
					{value:3,label:'重婚'}
				],
				marriage_show:false,
				marriage_name:'',
				nativePlace_list:area,
				nativePlace_show:false,
				blood_list:[
					{value:1,label:'A型'},
					{value:2,label:'B型'},
					{value:3,label:'O型'},
					{value:4,label:'Rh型'}
				],
				blood_show:false,
				blood_name:'',
				education_show:false,
				education_name:'',
				education_list:[
					{
						value: '1',
						label: '高中'
					},
					{
						value: '2',
						label: '中专'
					},
					{
						value: '3',
						label: '大专'
					},
					{
						value: '4',
						label: '本科'
					},
					{
						value: '5',
						label: '硕士'
					},
					{
						value: '6',
						label: '博士'
					},
					{
						value: '7',
						label: '院士'
					}
					
				],
				time_show:false,
				time_list:[
					{value:1,label:'2020年'}
				],
				time_name:'',
				sub_status:false,
				loading:false,
				error:false
			}
		},
		methods: {
			getData(){
				
				let that = this
				
				this.loading = true
				
				this.error=false
				
				this.$request({
					url:'/user/get_info',
					method:'post',
					success(res){
						if(res.statusCode==200){
							
							if(res.data.code==1){
								if(res.data.data){
									that.formData = res.data.data
									for(var i in that.occupation_list){
										
										if(that.occupation_list[i].value==that.formData.u_occupation){
											that.occupation_name=that.occupation_list[i].label
											
										}
										
									}
									
									let moenyVal=that.formData.u_salaryMin+'-'+that.formData.u_salaryMax
									
									for(var i in that.salary_list){
										
										
										if(that.salary_list[i].value==moenyVal){
											that.salary_name=that.salary_list[i].label
											
										}
										
									}
									
									for(var i in that.height_list){
										
										if(that.height_list[i].value==that.formData.u_height){
											that.height_name = that.height_list[i].label
										}
										
									}
									
									for(var i in that.marriage_list){
										if(that.marriage_list[i].value==that.formData.u_marriage){
											that.marriage_name = that.marriage_list[i].label
										}
									}
									
									for(var i in that.blood_list){
										if(that.blood_list[i].value==that.formData.u_blood){
											that.blood_name = that.blood_list[i].label
										}
									}
									
									for(var i in that.education_list){
										if(that.education_list[i].value==that.formData.u_education){
											that.education_name=that.education_list[i].label
										}
									}
									
									if(that.formData.u_birthday!=0){
										that.formData.u_birthday*=1000;
										
										let date=new Date(that.formData.u_birthday)
										
										let m=date.getMonth()+1
										
										let d=date.getDate()
										
										that.time_name = date.getFullYear()+'-'+m+'-'+d
									}
								}
							}else{
								
								

								if(res.data.code==101 || res.data.code==102 || res.data.code==103){
									
									uni.navigateTo({
										url:'/pages/login/login'
									})
									
								}else{
									that.$refs.uToast.show({
										title: res.data.msg,
										type: 'warning'
									})
									
									that.error = true
								}
								
								
								
							}
							
						}else{
							
							that.$refs.uToast.show({
								title: '网络繁忙',
								type: 'warning'
							})
							
							that.error = true
							
						}
					},
					fail(err){
						that.$refs.uToast.show({
							title: '数据获取失败',
							type: 'warning'
						})
						
						that.error = true
					},
					complete(){
						that.loading = false
					}
				})
			},
			submit(){
				
				if(this.formData.u_occupation==0){
					
					this.$refs.uToast.show({
						title: '请选择您的职业',
						type: 'warning'
					})
					
					return false
				}
				
				if(this.formData.u_salaryMin==0 && this.formData.u_salaryMax==0){
					
					this.$refs.uToast.show({
						title: '请选择您的月薪',
						type: 'warning'
					})
					
					return false
					
				}
				
				if(this.formData.u_city==''){
					this.$refs.uToast.show({
						title: '请选择您的居住地址',
						type: 'warning'
					})
					
					return false
				}
				
				if(this.formData.u_nickname==''){
					this.$refs.uToast.show({
						title: '请输入您的昵称',
						type: 'warning'
					})
					
					return false
				}
				
				if(this.formData.u_height==0){
					
					this.$refs.uToast.show({
						title: '请选择您的身高',
						type: 'warning'
					})
					
					return false
					
				}
				
				if(this.formData.u_marriage==0){
					
					this.$refs.uToast.show({
						title: '请选择您的婚烟状态',
						type: 'warning'
					})
					
					return false
				}
				
				if(this.formData.u_place==''){
					
					this.$refs.uToast.show({
						title: '请选择您的籍贯',
						type: 'warning'
					})
					
					return false
					
				}
				
				if(this.formData.u_blood==0){
					
					this.$refs.uToast.show({
						title: '请选择您的血型',
						type: 'warning'
					})
					
					return false
					
				}
				
				if(this.formData.u_education==0){
					
					this.$refs.uToast.show({
						title: '请选择您的学历',
						type: 'warning'
					})
					
					return false
					
				}
				
				if(this.formData.u_birthday==0){
					
					this.$refs.uToast.show({
						title: '请选择您的生日',
						type: 'warning'
					})
					
					return false
					
				}
				
				if(this.sub_status){
					return false
				}
				
				let that = this
				
				this.sub_status = true
				
				let data = JSON.parse(JSON.stringify(that.formData));
				
				data.u_birthday=Math.round(data.u_birthday/1000)
				
				this.$request({
					url:'/user/set_info',
					data:data,
					method:'post',
					success(res){
						if(res.statusCode==200){
							if(res.data.code==1){
								
								that.$refs.uToast.show({
									title: '保存成功',
									type: 'success',
									url:'/pages/user/user',
									isTab:true
								})
								
							}else{
								that.$refs.uToast.show({
									title: res.data.msg,
									type: 'warning'
								})
							}
						}else{
							that.$refs.uToast.show({
								title: '网络繁忙',
								type: 'warning'
							})
						}
					},
					fail(err){
						that.$refs.uToast.show({
							title: '提交失败',
							type: 'warning'
						})
					},
					complete(){
						that.sub_status = false
					}
				})
			},
			occupation_confirm(e){
				// console.log(e)
				this.occupation_name=e[0].label
				
				this.formData.u_occupation = e[0].value
			},
			salary_confirm(e){
				
				this.salary_name=e[0].label
				
				let money=e[0].value.split("-")
				
				this.formData.u_salaryMin = money[0]
				
				this.formData.u_salaryMax = money[1]
			},
			area_confirm(e){
				let name=''
				for(var i in e){
					
					if(i!=0){
						name+=','
					}
					
					name+=e[i].label
				}
				
				this.formData.u_city = name
				
			},
			height_confirm(e){
				this.height_name=e[0].label
				
				this.formData.u_height = e[0].value
			},
			marriage_confirm(e){
				this.marriage_name=e[0].label
				
				this.formData.u_marriage=e[0].value
			},
			nativePlace_confirm(e){
				let name=''
				for(var i in e){
					
					if(i!=0){
						name+=','
					}
					
					name+=e[i].label
				}
				
				
				this.formData.u_place=name
				
			},
			blood_confirm(e){
				this.blood_name=e[0].label
				
				this.formData.u_blood = e[0].value
			},
			education_confirm(e){
				this.education_name=e[0].label
				
				this.formData.u_education=e[0].value
			},
			time_change(e){
				// console.log(e)
				this.time_name=e.result
				
				this.formData.u_birthday=new Date(this.time_name).getTime()

			}
		},
		onLoad(){
			 let data=[]
			for(var i=140;i<=200;i++){
				data.push({value:i,label:i+'cm'})
			}
			
			this.height_list=data
			
			this.getData()
		}
	}
</script>

<style scoped>
	.butt_view{
		width: 710rpx;
		padding-left: 40rpx;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}
	.item_box{
		display: flex;
		flex-direction: column;
		margin-top: 30rpx;
		font-size: 32rpx;
	}
	.item_box:last-child{
		margin-bottom: 30rpx;
	}
	.item_box .item_view{
		width:750rpx;
		background-color: #FFFFFF;
		display: flex;
		justify-content: center;
		position: relative;
	}
	.item_box .item_view .cen{
		width: 640rpx;
		height: 100rpx;
		border-bottom: 1px solid #EFEFEF;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.item_box .item_view .cen .right_item{
		color: #888888;
	}
	.item_box .item_view .cen .right_item .text_input{
		width:540rpx;
		height: 100rpx;
		font-size: 30rpx;
	}
	.exit_icon{
		padding:10rpx;
		background: url('') no-repeat;
		background-size: 20rpx;
		position: absolute;
		top:35rpx;
		right: 15rpx;
	}
</style>
